<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<%@include file="../include/base.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	
	<title>CRM-task</title>
	<%@ include file="../include/head.jsp" %>
	<link rel='stylesheet' type='text/css' href='${basePath}/fullcalendar-1.5.3/fullcalendar/fullcalendar.css' />
	<link rel='stylesheet' type='text/css' href='${basePath}/fullcalendar-1.5.3/fullcalendar/fullcalendar.print.css' media='print' />
	<script type='text/javascript' src='${basePath}/fullcalendar-1.5.3/jquery/jquery-1.7.1.min.js'></script>
	<script type='text/javascript' src='${basePath}/fullcalendar-1.5.3/jquery/jquery-ui-1.8.17.custom.min.js'></script>
	<script type='text/javascript' src='${basePath}/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js'></script>
	<script type='text/javascript'>
	
		$(document).ready(function() {
		
			var date = new Date();
			var d = date.getDate();
			var m = date.getMonth();
			var y = date.getFullYear();
			
			$('#calendar').fullCalendar({
				header: {
					left: 'prev,next today',
					center: 'title',
					right: 'month,agendaWeek,agendaDay'
				},
				selectable: true,
				selectHelper: true,
				select: function(start, end, allDay) {
					var title = prompt('Event Title:');
					if (title) {
						$.post("addTask.action",{"time":start.getTime(),"task.title":title},function(task){
							$("#calendar").fullCalendar('renderEvent',
								{	
									id:task.id,
									title: title,
									start: task.start,
									end:task.end,
									allDay: allDay
								},
								true // make the event "stick"
							);
						});
						
					}
					calendar.fullCalendar('unselect');
				},
				editable: true,
				editable: true,
				events: "${basePath}/task/taskJson.action",
				disableDragging: false,
				
				eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {

					$.post("editTask.action",{"task.id":event.id,"task.title":event.title,"task.start":event.start.getTime(),"task.end":event.end.getTime()});

			    },
				eventResize:function(event,dayDelta,minuteDelta,allDay,revertFunc) {

					$.post("editTask.action",{"task.id":event.id,"task.title":event.title,"task.start":event.start.getTime(),"task.end":event.end.getTime()});

			    },
				
			    eventClick: function(event, jsEvent, view) {
			    	var title = prompt('Event Title:',event.title);
					if (title) {
						$.post("editTask.action",{"task.id":event.id,"task.title":event.title,"task.start":event.start.getTime(),"task.end":event.end.getTime()});
						
						event.title = title;
						$('#calendar').fullCalendar('updateEvent', event);
					}
					calendar.fullCalendar('unselect');
			    }
				
			    
			});
			
		});
	
	</script>
	<style type='text/css'>
	
		body {
			margin-top: 40px;
			text-align: center;
			font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
			}
	
		#calendar {
			width: 900px;
			margin: 0 auto;
			}
	
	</style>
</head>
<body>
	<jsp:include page="../include/top.jsp">
		<jsp:param value="task" name="tag"/>
	</jsp:include>
	<div id='calendar'></div>
</body>
</html>

